<template>
  <div class="platehub">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>车牌识别</el-breadcrumb-item>
      <el-breadcrumb-item>视频识别</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box_card">
      <!-- 顶部按钮区域 -->
      <el-row :gutter="20">
        <el-col :span="3">
          <el-button type="primary" @click="getVideo()">开始识别</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" plain>关闭识别</el-button>
        </el-col>
        <el-col :span="3">
          <el-link type="primary" disabled>电脑带摄像头或者外接摄像头才可以使用</el-link>
        </el-col>
      </el-row>
      <!-- 主区域 -->
      <div class="plate_box">
        <div class="video">
          <img :src="video_url" class="video_img" @error="handleError" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      video_url: "", // 字节流
    };
  },
  methods: {
    handleError(event) {
      if (event.target.error) {
        console.log("Error loading video:", event.target.error);
        // 判断错误信息中是否包含特定字符串，来确定视频是否停止
        if (event.target.error.message.includes("500")) {
          console.log("Video stopped.");
          // 执行停止视频逻辑
          // ...
        }
      }
    },
    getVideo() {
      this.video_url = "http://8.130.39.235:5001/video/video_feed?timestamp=1634188612";
    },
  },
};
</script>

<style lang="less" scoped>
.platehub {
  .box_card {
    margin-top: 20px;
    .plate_box {
      display: flex;
      margin-top: 20px;
      width: 100%;
      height: 500px;

      .video {
        width: 640px;
        height: 480px;
        .video_img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>